html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width : 100%;
  margin: 0;
  padding: 0;
  background: rgb(0, 0, 0);
  background: url(../img/bg_lg_dark.jpg);
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
}
* {
  box-sizing: border-box;
}
.test_tube {
  top: 300px;
  left: 300px; 
  width: 50px;
  height: 250px;
  box-sizing: border-box;
  border: 1px solid rgba(137, 159, 201, 0.26);
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  transform-origin: 0 0;
  transition: all 200ms;
  background-color: rgba(100, 148, 237, 0.233);  
 backdrop-filter: blur(1.5px);
 box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
}
#confetti {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.test_tube:after{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
}
.test_tube:after{
	left: 50%;
}


.fluid {
  opacity: 0.7;
  box-sizing: border-box;
  height: 50px;
  transition: height 200ms;
}
#undo {
  height: 100px;
  width: 100px;
  position: absolute;
  top:0;
  right: 0;
  margin: 30px 60px;
  background-image: url("../img/undo.png");
  background-size: cover;
}

.btn {
  z-index: 999;
}
.btn:hover {
  transform: scale(1.1, 1.1) rotateZ(-5deg);
  cursor: pointer;
}

#undo.disabled:hover {
  cursor: no-drop;
}

#newGame {
  margin: 30px 60px;
  position: absolute;
  top: 0;
  left:0;
  line-height: 100px;
  font-size: 72px;
  color:#e6ac23;
  font-family: 'Amatic SC', cursive;
}
@media screen and (max-width : 800px) {
  #newGame{
    margin: 20px;
  line-height: 70px;
  font-size: 48px;
  }
  #undo {
    margin: 20px;
    height: 70px;
    width: 70px;
  }
}
.line {
  position: absolute;
  content: "";
  height: 0;
  width: 8px;
  background-color: darkblue;
  
  border-radius: 50% 50% 4px 4px;
  z-index: -1;
}

.fluids .wave {
  display: none;
  position: absolute;
  top: -15px;
  left: 0;
  z-index: -1;
  height: 20px;
  width: 425px;
  background-image: url("../img/wave.svg");
  background-size: auto  98%;
  background-repeat: repeat-x;
  animation-name: waves;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes waves {
  from {
    left: 0;
  }
  to {
    left: -265px;
  }
}




.fluids {
  box-sizing: border-box;
  position: absolute;
  height: 250px;
  width: 300px;
  transform-origin: 50% 50%;
  left: -125px;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  transition: all 200ms;
}



 .fluid1 {

  animation-name: f1;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-timing-function: linear;
}
 .fluid2 {
  
  animation-name: f2;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-timing-function: linear;
}
 .fluid3 {
  animation-name: f3;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-timing-function: linear;

}
 .fluid4 {
  animation-name: f4;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-timing-function: linear;

}




@keyframes fluid {
  0% {
    transform:rotateZ(0) ;
    
  }
  20% {
    transform:rotateZ(63deg) ;
    
  }
  40% {
    transform:rotateZ(76deg) ;
    
  }
  60% {
    transform:rotateZ(79deg) ;
    
  }
  80% {
    transform:rotateZ(85deg) ;
    
  }

  100% {
    transform:rotateZ(90deg) ;
    
  }

}
.disabled {
  filter: grayscale(100%);
  cursor: no-drop;
}


@keyframes f1 {
  0% {
    height: 50px;
    
  }
  20% {
    height: 22px;
  }
  40% {
    height: 0;
  }
  100% {
    height: 0;
  }
}

@keyframes f2 {
  0% {
    height: 50px;
    
  }
  20% {
    height: 22px;
  }
  40% {
    height: 12px; 
  }
  60% {
    height: 0;
  }
  100% {
    height: 0;
  }

}
@keyframes f3 {
  0% {
    height: 50px;
    
  }
  20% {
    height: 22px;
  }
  40% {
    height: 14px;
  }
  60% {
    height: 12px;
  }
  80% {
    height: 0;
  }
  100% {
    height: 0;
    
  }

}
@keyframes f4 {
  0% {
    height: 50px;
    
  }
  20% {
    height: 100px;
  }
  40% {
    height: 108px;
  }
  60% {
    height: 115px;
  }
  80% {
    height: 115px;
  }
  100% {
    height: 97px;
    
  }

}
